<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06 - 单向数据流</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h2>父组件：{{name}}</h2>
    <input type="text" v-model="name">
    <h2>父组件：{{user.age}}</h2>
    <hr>
    <my-hello :name.sync="name" :user="user"></my-hello>
</div>

<template id="hello">
    <div>
        <h3>子组件：{{name}}</h3>
        <h3>子组件：{{user.age}}</h3>
        <button @click="change">修改数据</button>
    </div>
</template>


<script>

    let vm = new Vue({ //父组件
        el: "#app",
        data: {
            name: 'tom',
            user: {
                name: 'zhangsan',
                age: 24
            }
        },
        components: {
            "my-hello": {
                template: '#hello',
                props: ['name', 'user'],
                data() {
                    return {
                        username: this.name //方式1：将数据存入另一个变量中再操作
                    }
                },
                methods: {
                    change() {
                        // this.username='alice';
                        // this.name='alice';
                        // this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
                        this.user.age = 18;
                    }
                }
            }
        }

    })
</script>
</body>
</html>